<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.88.1">
    <title>Album example · Bootstrap v5.1</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/album/">



    <!-- Bootstrap core CSS -->
<link href="https://getbootstrap.com/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <!-- Favicons -->
<meta name="theme-color" content="#7952b3">


    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>


  </head>
  <body>

<header>
  <div class="collapse bg-dark" id="navbarHeader">
    <div class="container">
      <div class="row">
        <div class="col-sm-8 col-md-7 py-4">
          <h4 class="text-white">About</h4>
          <p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
        </div>
        <div class="col-sm-4 offset-md-1 py-4">
          <h4 class="text-white">Contact</h4>
          <ul class="list-unstyled">
            <li><a href="#" class="text-white">Follow on Twitter</a></li>
            <li><a href="#" class="text-white">Like on Facebook</a></li>
            <li><a href="#" class="text-white">Email me</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="navbar navbar-dark bg-dark shadow-sm">
    <div class="container">
      <a href="#" class="navbar-brand d-flex align-items-center">
          <svg t="1640867269148" class="icon" viewBox="0 0 1024 1024" width="75" height="75" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9733" width="200" height="200"><path d="M825.2 764.9H525.4c-14.4 0-26-11.6-26-26 0 14.4-11.6 26-26 26H173.6c-14.4 0-26-11.6-26-26v37c0 14.4 11.6 26 26 26h299.8c14.4 0 26-11.6 26-26 0 14.4 11.6 26 26 26h299.8c14.4 0 26-11.6 26-26v-37c0 14.3-11.6 26-26 26z" fill="#2EA7E0" p-id="9734"></path><path d="M825.2 279.9H525.4c-14.4 0-26 11.6-26 26 0-14.4-11.6-26-26-26H173.6c-14.4 0-26 11.6-26 26v10c0-14.4 11.6-26 26-26h299.8c14.4 0 26 11.6 26 26 0-14.4 11.6-26 26-26h299.8c14.4 0 26 11.6 26 26v-10c0-14.4-11.6-26-26-26zM643.5 667.3l-9.3 28.1c-4.5-2.1-7.3-7.3-5.5-12.7l14.8-44.7c0.7-2.2 1.9-4.1 3.5-5.7l204.2-204.2v-85.2c0-14.4-11.6-26-26-26H525.4c-14.4 0-26 11.6-26 26 0-14.4-11.6-26-26-26H173.6c-14.4 0-26 11.6-26 26v396c0 14.4 11.6 26 26 26h299.8c14.4 0 26-11.6 26-26 0 14.4 11.6 26 26 26h299.8c14.4 0 26-11.6 26-26V457.4L647 661.6c-1.6 1.6-2.8 3.5-3.5 5.7z" fill="#F7F8F8" p-id="9735"></path><path d="M641.8 695.8l22.7-7.5 22.1-7.3c2.2-0.7 4.1-1.9 5.7-3.5l209.2-209.2-12.6-12.6-7.7-7.7c-5.7-5.7-14.9-5.7-20.5 0L647 661.6c-1.6 1.6-2.8 3.6-3.5 5.7l-9.3 28.1c2.3 1 4.9 1.3 7.6 0.4z" fill="#F7F8F8" p-id="9736"></path><path d="M270.9 542m-16 0a16 16 0 1 0 32 0 16 16 0 1 0-32 0Z" fill="#3E3A39" p-id="9737"></path><path d="M238.9 568.7m-16 0a16 16 0 1 0 32 0 16 16 0 1 0-32 0Z" fill="#EF6676" p-id="9738"></path><path d="M410.6 568.7m-16 0a16 16 0 1 0 32 0 16 16 0 1 0-32 0Z" fill="#EF6676" p-id="9739"></path><path d="M378.6 542m-16 0a16 16 0 1 0 32 0 16 16 0 1 0-32 0Z" fill="#3E3A39" p-id="9740"></path><path d="M350 552.7h-50.6c-3.9 0-6.7 3.7-5.8 7.5 1.8 7.5 6.3 14 12.3 18.4 5.3 3.8 11.8 6.1 18.8 6.1s13.5-2.3 18.8-6.1c6.1-4.4 10.5-10.9 12.3-18.4 1-3.8-1.9-7.5-5.8-7.5z" fill="#3E3A39" p-id="9741"></path><path d="M324.7 568.7c-7 0-13.3 3.2-17.5 8.2-0.8 0.9-0.5 2.3 0.5 3 4.9 3.1 10.7 4.9 17 4.9 6.2 0 12.1-1.8 17-4.9 1-0.6 1.3-2 0.5-3-4.2-5-10.5-8.2-17.5-8.2z" fill="#E4847F" p-id="9742"></path><path d="M692.3 677.5c-1.6 1.6-3.6 2.8-5.7 3.5l-22.1 7.3c1.3 5.6 7.2 9.5 13.3 7.5l44.7-14.8c2.2-0.7 4.1-1.9 5.7-3.5l122.9-122.9v-36L692.3 677.5z" fill="#2EA7E0" p-id="9743"></path><path d="M215 852.1h-8.4v-8.4c0-2.1-1.7-3.8-3.8-3.8s-3.8 1.7-3.8 3.8v8.4h-8.4c-2.1 0-3.8 1.7-3.8 3.8s1.7 3.8 3.8 3.8h8.4v8.4c0 2.1 1.7 3.8 3.8 3.8s3.8-1.7 3.8-3.8v-8.4h8.4c2.1 0 3.8-1.7 3.8-3.8s-1.7-3.8-3.8-3.8zM187.8 257.2c2.4 2.4 6.3 2.4 8.8 0l9.6-9.6 9.6 9.6c2.4 2.4 6.3 2.4 8.8 0 2.4-2.4 2.4-6.3 0-8.8l-9.6-9.6 9.6-9.6c2.4-2.4 2.4-6.3 0-8.8-2.4-2.4-6.3-2.4-8.8 0l-9.6 9.6-9.6-9.6c-2.4-2.4-6.3-2.4-8.8 0-2.4 2.4-2.4 6.3 0 8.8l9.6 9.6-9.6 9.6c-2.4 2.4-2.4 6.4 0 8.8zM756.2 844.9c-11.6 0-21 9.4-21 21s9.4 21 21 21 21-9.4 21-21-9.4-21-21-21z m0 32c-6.1 0-11-4.9-11-11s4.9-11 11-11 11 4.9 11 11-4.9 11-11 11zM851.6 183.6c2.3 0 4.2-1.9 4.2-4.2V166c0-2.3-1.9-4.2-4.2-4.2-2.3 0-4.2 1.9-4.2 4.2v13.4c0 2.3 1.9 4.2 4.2 4.2zM851.6 223.7c2.3 0 4.2-1.9 4.2-4.2v-13.4c0-2.3-1.9-4.2-4.2-4.2-2.3 0-4.2 1.9-4.2 4.2v13.4c0 2.3 1.9 4.2 4.2 4.2zM867.5 214.6c0.8 0.8 1.9 1.2 3 1.2s2.1-0.4 3-1.2c1.6-1.6 1.6-4.3 0-5.9l-9.4-9.4c-1.6-1.6-4.3-1.6-5.9 0-1.6 1.6-1.6 4.3 0 5.9l9.3 9.4zM839.2 186.3c0.8 0.8 1.9 1.2 3 1.2s2.1-0.4 3-1.2c1.6-1.6 1.6-4.3 0-5.9l-9.4-9.4c-1.6-1.6-4.3-1.6-5.9 0-1.6 1.6-1.6 4.3 0 5.9l9.3 9.4zM839.2 199.3l-9.4 9.4c-1.6 1.6-1.6 4.3 0 5.9 0.8 0.8 1.9 1.2 3 1.2s2.1-0.4 3-1.2l9.4-9.4c1.6-1.6 1.6-4.3 0-5.9-1.7-1.7-4.4-1.7-6 0zM861.1 187.5c1.1 0 2.1-0.4 3-1.2l9.4-9.4c1.6-1.6 1.6-4.3 0-5.9-1.6-1.6-4.3-1.6-5.9 0l-9.4 9.4c-1.6 1.6-1.6 4.3 0 5.9 0.7 0.8 1.8 1.2 2.9 1.2zM860.8 192.8c0 2.3 1.9 4.2 4.2 4.2h13.4c2.3 0 4.2-1.9 4.2-4.2 0-2.3-1.9-4.2-4.2-4.2H865c-2.3 0-4.2 1.9-4.2 4.2zM824.9 196.9h13.4c2.3 0 4.2-1.9 4.2-4.2 0-2.3-1.9-4.2-4.2-4.2h-13.4c-2.3 0-4.2 1.9-4.2 4.2 0 2.4 1.9 4.2 4.2 4.2z" fill="#036EB8" p-id="9744"></path><path d="M138.8 895.7m-8.9 0a8.9 8.9 0 1 0 17.8 0 8.9 8.9 0 1 0-17.8 0Z" fill="#036EB8" p-id="9745"></path><path d="M871.6 913.5m-8.9 0a8.9 8.9 0 1 0 17.8 0 8.9 8.9 0 1 0-17.8 0Z" fill="#036EB8" p-id="9746"></path><path d="M293.4 210.8m-8.9 0a8.9 8.9 0 1 0 17.8 0 8.9 8.9 0 1 0-17.8 0Z" fill="#036EB8" p-id="9747"></path><path d="M147.6 437.7c5.5 0 10-4.5 10-10v-20.6c0-5.5-4.5-10-10-10s-10 4.5-10 10v20.6c0 5.5 4.5 10 10 10zM147.6 385c5.5 0 10-4.5 10-10v-59.1c0-8.8 7.2-16 16-16h299.8c8.8 0 16 7.2 16 16v361.6c0 5.5 4.5 10 10 10s10-4.5 10-10V315.9c0-8.8 7.2-16 16-16h299.8c8.8 0 16 7.2 16 16v77.5c0 5.5 4.5 10 10 10s10-4.5 10-10v-77.5c0-19.9-16.1-36-36-36H525.4c-10.2 0-19.4 4.3-26 11.1-6.6-6.9-15.8-11.1-26-11.1H173.6c-19.9 0-36 16.1-36 36V375c0 5.5 4.5 10 10 10z" fill="#036EB8" p-id="9748"></path><path d="M851.2 717.9c-5.5 0-10 4.5-10 10v48c0 8.8-7.2 16-16 16H525.4c-8.8 0-16-7.2-16-16v-67.6c0-5.5-4.5-10-10-10s-10 4.5-10 10v67.6c0 8.8-7.2 16-16 16H173.6c-8.8 0-16-7.2-16-16v-317c0-5.5-4.5-10-10-10s-10 4.5-10 10v317c0 19.9 16.1 36 36 36h299.8c10.2 0 19.4-4.3 26-11.1 6.6 6.9 15.8 11.1 26 11.1h299.8c19.9 0 36-16.1 36-36v-48c0-5.6-4.5-10-10-10zM851.2 541.4c-5.5 0-10 4.5-10 10v141.5c0 5.5 4.5 10 10 10s10-4.5 10-10V551.4c0-5.6-4.5-10-10-10zM797.7 407.1c0-5.5-4.5-10-10-10H637.1c-5.5 0-10 4.5-10 10s4.5 10 10 10h150.6c5.6 0 10-4.5 10-10zM562.9 417.1h47.7c5.5 0 10-4.5 10-10s-4.5-10-10-10h-47.7c-5.5 0-10 4.5-10 10s4.5 10 10 10z" fill="#036EB8" p-id="9749"></path><path d="M562.9 589.9c-5.5 0-10 4.5-10 10s4.5 10 10 10h65.3c5.5 0 10-4.5 10-10s-4.5-10-10-10h-65.3zM212.3 686.3c-5.5 0-10 4.5-10 10s4.5 10 10 10h224.8c5.5 0 10-4.5 10-10s-4.5-10-10-10H212.3zM735.2 504.2c0-5.5-4.5-10-10-10H562.9c-5.5 0-10 4.5-10 10s4.5 10 10 10h162.3c5.5 0 10-4.5 10-10zM912.9 436.3l-24.7-24.7c-9.6-9.6-25.1-9.6-34.7 0l-9 9L640 625.2c-2.7 2.7-4.7 6-5.9 9.6l-14.8 44.7c-0.7 2.2-1.1 4.5-1 6.7H563c-5.5 0-10 4.5-10 10s4.5 10 10 10h64c1.7 0 3.4-0.4 4.8-1.2 2.2 0.8 4.5 1.2 6.9 1.2 2.1 0 4.3-0.3 6.4-1l44.7-14.8c3.6-1.2 6.9-3.2 9.6-5.9l159.3-159.3 54.3-54.3c9.5-9.5 9.5-25-0.1-34.6z m-274.2 250c-0.1 0-0.2 0.1-0.4-0.1s-0.1-0.2-0.1-0.4l12-36.3 24.7 24.7-36.2 12.1z m260.1-229.5l-54.3 54.3-152.2 152.3-31.1-31.1 197.5-197.5 9-9c1.8-1.8 4.6-1.8 6.4 0l24.7 24.7c1.8 1.7 1.8 4.6 0 6.3z" fill="#036EB8" p-id="9750"></path></svg>
        <span style="color: #c5e8ef">林淑婷</span>
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    </div>
  </div>
</header>

<main>

  <section class="py-5 text-center container">
    <div class="row py-lg-5">
      <div class="col-lg-6 col-md-8 mx-auto">
          <form method="post" action="/result2">
              word:<br>
              <input type="text" name="word" >
              <br>
              vowels:<br>
              <input type="text" name="vowels" value="aeiou"><br>
              <p> <input type="submit" name="提交"></p>
          </form>
      </div>
    </div>
  </section>



</main>

<footer class="text-muted py-5">
  <div class="container">
    <p class="float-end mb-1">
      <a href="#">Back to top</a>
    </p>
  </div>
</footer>


    <script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>


  </body>
</html>
